<template>
  <view>
    <view class="bgImg" :style="{height: wh +'px'}">
      <image src="/static/loginbg2.jpg" mode=""></image>
    </view>
    <view class="logo">
      <image :src="loginImg" mode=""></image>
    </view>
    <view class="login-container">
      <view class="inp-box">
        <input type="text" placeholder="请输入学号" v-model="studentId" />
        <uni-icons type='person' size='30' class="icon" color="#00f"></uni-icons>
      </view>
      <view class="inp-box">
        <input type="password" placeholder="请输入密码" v-model="password" />
        <uni-icons type='locked' size='30' class="icon" color="#00f"></uni-icons>
      </view>
      <view class="login" @click="login()">
        登录
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        wh: 0,
        loginImg: '',
        studentId: '2209107013',
        password: '1234',
        id: '2'
      };
    },
    onLoad() {
      const sysInfo = uni.getSystemInfoSync()
      this.wh = sysInfo.windowHeight - 10
      this.loginImg = uni.getStorageSync('loginImg') || '/static/tab_icons/logo.jpg';
    },
    computed: {
      ...mapState('my_user', ['userInfo', 'token']),
    },
    methods: {
      ...mapMutations('my_user', ['updateToken', 'updateUserInfo']),
      async login() {
        if (this.studentId == '') return uni.$showMsg('学号不能为空！')
        if (!/^\d{10}$/.test(this.studentId)) return uni.$showMsg('学号格式错误！')
        if (this.password == '') return uni.$showMsg('密码不能为空！')
        let that = this
        const userData = {
          studentId: that.studentId,
          password: that.password
        }
        const {
          data: {
            data
          }
        } = await uni.$http.post(`/users/users/login`, userData)
        console.log(this.token);
        this.updateToken(data.token)
        const res = await uni.$http.get(`/users/users/${data.studentId}`)
        this.updateUserInfo(res.data.data)
        uni.setStorageSync('loginImg', res.data.data.avatar);
        uni.$showMsg('登录成功')
        uni.switchTab({
          url: '/pages/home/home'
        })
      },
    }
  }
</script>

<style lang="scss">
  .bgImg {
    position: absolute;
    width: 100%;
    height: 700rpx;
    // opacity:0.4;

    image {
      // margin-top: 100rpx;
      // margin-right: 40rpx;
      // width: 760rpx;
      // height: 440rpx;
      width: 100%;
      height: 100%;
    }
  }

  .logo {
    position: absolute;
    top: 320rpx;
    left: 50%;
    width: 230rpx;
    height: 230rpx;
    border-radius: 50%;
    overflow: hidden;
    transform: translateX(-50%);

    image {
      width: 100%;
      height: 100%;
    }
  }

  .login-container {
    position: absolute;
    top: 600rpx;
    left: 50%;
    display: flex;
    flex-direction: column;
    justify-content: top;
    width: 90%;
    height: 600rpx;
    margin: 0 auto;
    transform: translateX(-50%);
    z-index: 999;

    .inp-box {
      position: relative;
      height: 80rpx;
      margin-top: 70rpx;
      font-size: 34rpx;

      input {
        padding-left: 2.5em;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #000;
      }

      .icon {
        position: absolute;
        top: -10rpx;
      }
    }

    .login {
      width: 80%;
      height: 100rpx;
      margin: 60rpx auto;
      text-align: center;
      line-height: 100rpx;
      color: #555;
      border-radius: 50rpx;
      // background: linear-gradient(to right, #a1ceca 80%, #e0f0ed);
      background-color: #e5e5e5;
    }
  }
</style>